import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity
} from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import MainScreen from './src/router';
import WelcomePage from './src/pages/WelcomePage';
import Login from './src/pages/Login';
import ClothingType from './src/pages/ClothingType';
import SizeFilter from './src/pages/SizeFilter';


//非底部 页面导航器
const Stack = createNativeStackNavigator();
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator>
          {/* <Stack.Screen name="WelcomePage" options={{ headerShown: false }} component={WelcomePage} />  
          <Stack.Screen name="Login" options={{ headerShown: false }} component={Login} /> */}
          <Stack.Screen name="MainScreen" options={{ headerShown: false }} component={MainScreen} />
          <Stack.Screen name="ClothingType" component={ClothingType}
            options={({ navigation, route }) => ({
              title: '分类',
              headerTitleAlign: 'center',
              headerRight: () => <TouchableOpacity onPress={() => navigation.navigate("SizeFilter")} activeOpacity={0.9}><AntDesign name="bars" size={30} color="#000" /></TouchableOpacity>
            })} />
           <Stack.Screen name="SizeFilter" component={SizeFilter} 
            options={({ navigation, route }) => ({
              title: '筛选',
              headerTitleAlign: 'center',
              headerRight: () => <TouchableOpacity onPress={() => navigation.goBack()} activeOpacity={0.9}><AntDesign name="close" size={30} color="#000" /></TouchableOpacity>
            })} />

        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
});

export default App;
